<template>
  <view class="famousQuote flex flex-column align-center bg_F5F5F5 pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack title="名人名言" is-fixed
                  background="#FFFFFF"
                  @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <scroll-view :scroll-y="true" class="w-full" :style="{height:`calc(100vh - ${page.headerHeight}px)`}">
      <view class="w-full famousQuote_bg" :style="{minHeight:`calc(100vh - ${page.headerHeight}px)`}">
        <view class="text column">
          <text>
            好的照片与历史有关，与命运有关。
            今天的影像，多年后就是历史的一部分。
            因为五年后、十年后。
            很多场景都不存在了。
          </text>
          <text>——陈小波</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { reactive } from 'vue';

  const page = reactive({
    headerHeight: 0,
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }
</script>

<style lang="scss">
  .famousQuote_bg {
    background: url($uni-bg-url-sq +  "/index/citang_mingyan.png") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 540rpx;
      height: 234rpx;
      font-weight: bold;
      font-size: 30rpx;
      color: #383838;
    }
  }
</style>
